<template>
  <div class="layout page-clust">
    <span class="ml-15" v-if="voting">
      <StatusBadge class="mr-5" :content="$t('page.system.voting')" badge="processing" :statuschangable="false" />
      {{$t('page.system.voting')}}
    </span>
    <span class="ml-15" v-if="timering">
      <StatusBadge class="mr-5" :content="$t('page.system.timering')" badge="processing" :statuschangable="false" />
      {{$t('page.system.timering')}}
    </span>
    <Divider />
    <Table :columns="columns" :data="centrals.list" border>
      <template slot-scope="{ row }" slot="master">
        <Tooltip :transfer="true" :content="$t('page.system.master')">
          <Icon v-if="row.master" type="md-medal" color="orange" />
        </Tooltip>
      </template>
      <template slot-scope="{ row }" slot="resource">
        {{row.processors}}P | {{toMGB(row.memoryFree)}} | {{toMGB(row.memoryTotal)}} | {{toMGB(row.memoryMax)}}
      </template>
      <template slot-scope="{ row }" slot="online">
        <Tooltip v-if="row.online" :transfer="true" :content="$t('online')">
          <Badge status="processing" />
        </Tooltip>
        <Tooltip v-else :transfer="true" :content="$t('offline')">
          <Badge status="default" />
        </Tooltip>
        <Time v-if="!row.online" :time="row.lastActiveTime" />
      </template>
    </Table>
  </div>
</template>

<script>
  import StatusBadge from '@/components/statusbadge'
  export default {
    components: { StatusBadge },
    data() {
      return {
        columns: [
          { title: '', slot: 'master', width: 50, align: 'center' },
          { renderHeader: (h, col) => { return h('span', this.$t('page.system.clusttb.address')) }, key: 'address', width: 200 },
          { renderHeader: (h, col) => { return h('span', this.$t('page.system.clusttb.resource')) }, slot: 'resource' },
          { renderHeader: (h, col) => { return h('span', this.$t('page.system.clusttb.online')) }, slot: 'online', width: 120, align: 'center' },
          { renderHeader: (h, col) => { return h('span', this.$t('page.system.clusttb.version')) }, key: 'version', width: 150 },
        ],
        voting: false,
        timering: false,
        centrals: {
          list: []
        }
      }
    },
    created() {
      this.loadCentral()
    },
    methods: {
      loadCentral() {
        this.$md.dispatch('central_list').then(data => {
          if (data.retCode === 1) {
            this.voting = data.voting
            this.timering = data.timering
            this.centrals.list = data.data
          }
        })
      },
      toMGB(num) {
        let mb = num / (1024 * 1024)
        return mb > 1000 ? (parseInt(mb / 1000) + 'GB') : (parseInt(mb) + 'MB')
      }
    }
  };
</script>
